/*
 * @Author: weijingjing 1838352147@qq.com
 * @Date: 2025-01-08 21:28:43
 * @LastEditors: weijingjing 1838352147@qq.com
 * @LastEditTime: 2025-01-08 22:00:32
 * @FilePath: /ocr-ui/src/component/Docrender.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { useRef, useEffect, useState } from 'react';  
import * as docxPreview from 'docx-preview'

const DocxPreviewer = ({file}) => {   
    const previewRef = useRef();  
    const parseFile = ()=>{
        return new Promise((resolve, reject) => {
            console.log(file,">>>parseFile")
          const reader = new FileReader();
          reader.readAsArrayBuffer(file);
          reader.onload = (e) => {
            const arrayBuffer = e.target.result;  
            console.log(arrayBuffer,">>>data")
            // console.log(docxPreview,">>docxPreview")
                // 使用 docx-preview 渲染文档  
                docxPreview.renderAsync(arrayBuffer, previewRef.current);  
          };
        });
      }

    useEffect(() => {
    
        parseFile();
    
      }, [file]);


    return (  
        <div>  
            <div ref={previewRef} style={{ maxWidth: '800px', margin: '20px auto' }} />  
        </div>  
    );  
};  

export default DocxPreviewer;